<template>
  <div class="officials container">
    <div class="entering_title">
      <h3>领导关怀</h3>
      <p>OFFICIALS VISIT</p>
    </div>
    <ul class="officials_content">
      <li v-for="(item,index) in visit" :key="index" class="officials_content_li">
        <div class="officials_box">
          <img :src="'http://officialweb.obs.cn-north-4.myhuaweicloud.com/'+item.PictureUrl" alt="">
          <span class="officials_content_title">{{item.Title}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {getPartyData} from 'api/api'
export default {
  data () {
    return {
      visit: []
    }
  },
  mounted () {
    getPartyData()
    .then((res)=>{
      this.visit = []
      res.forEach(item => {
        if(item.Type == 5){
          this.visit.push(item)
        }
      });
    })
  }
}
</script>

<style lang="scss" scoped>
.officials{
  .officials_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    .officials_content_li{
      width: 290px;
      height: 235px;
      margin-right: 40px;
      margin-bottom: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      .officials_box{
        position: relative;
        width: 260px;
        height: 180px;
        transition: transform .3s linear;
        &:hover{
          transform: scale(1.1,1.1);
        }
        img{
          width: 100%;
          height: 100%;
        }
        .officials_content_title{
          display: block;
          font-size: 13px;
          line-height: 20px;
          color: #fff;
          // width: 100%;
          // height: 35%;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 10;
          background: rgba(89,163,255,0.8);
        }
      }
    }
  }
}
</style>
